<template>
  <view class="acont">
    <view class="tuij">
      <text class="title">推荐{{ stitle }}</text>
    </view>
    <view class="abox" :class="[page == totalpage ? 'lastbox' : '']">
      <view v-for="(item, index) in alist" :key="index" class="alist">
        <view class="img" :style="{'background-image': 'url(' + item.img + ')'}">
          <view class="ranking"><text class="num">{{ item.ranking }}</text></view>
        </view>
        <view class="content">
          <text class="title">{{ item.title }}</text>
          <view class="atype">
            <view>人数：{{ item.renshu }}({{ item.nan }}男{{ item.nv }}女)</view>
            <view>时长：{{ item.shichang }}h</view>
            <view>标签：{{ item.tags }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // import dmdialog from '@/components/dmDialog'
  export default {
    // components: {
    //     dmdialog
    // },
    props: {
      shopid: 0
    },
    data() {
      return {
        alist: {},
        page: 1,
        spage: 1,
        limit: 5,
        totalpage: 0,
        stitle: '',
        stype: ''
      }
    },

    onLoad() {

    },
    mounted() {
      this.getAList()
    },
    destroyed() {
      clearTimeout(this.timer)

    },
    methods: {
      getAList() {
        if (this.page > 2) {
          this.spage = this.page - 2
          this.stitle = '限独'
          this.stype = 'xd'
        } else {
          this.spage = this.page
          this.stitle = '盒装'
          this.stype = 'he'
        }
        this.$http({
          url: `/bigscreen/shoparticle`,
          data: {
            shop: this.shopid,
            page: this.spage,
            stype: this.stype,
            limit: this.limit
          },
          method: 'post'
        }).then(response => {
          this.alist = response.list
          this.totalpage = response.totalpage
          setTimeout(() => {
                    this.page++
                    if (this.page > 4) {
                      this.page = 1
                    }
                    this.getAList()
                  }, 10000)
        }).catch(error => {
          console.log(error)
        })
      },
      timer() {
        return setTimeout(() => {
          this.page++
          if (this.page > 4) {
            this.page = 1
          }
          this.getAList()
        }, 10000)
      }
    },
    watch: {
        pptv(newVal,oldVal) {
            this.setboxheight()
        }
    },
  }
</script>

<style lang="less">
  .acont {
    display: flex;

    .tuij {
      width: 30px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .title {
        writing-mode: vertical-lr;
      }
    }

    .abox {
      margin-left: 10px;
      width: 100%;
      display: flex;
      justify-content: flex-start;

      .alist {
        width: 20%;
        display: flex;
        justify-content: flex-start;

        .img {
          width: 60px;
          height: 90px;
          background-position: center;
          background-size: 100% auto;
          background-repeat: no-repeat;

          .ranking {
            background-color: rgba(0, 0, 0, .5);
            text-align: center;
            width: 30px;

            .num {
              font-size: 20px;
              font-weight: bold;
              color: #fff;
              font-style: italic;
            }
          }
        }

        .content {
          padding-left: 4px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2; //限制文本的行数，只显示两行
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .atype {
            font-size: 12px
          }
        }
      }
    }

    .lasbox {
      justify-content: flex-start;
    }
  }
</style>